<template>
  <div class="videoPlayerBox">
    <videoPlayerCom
      :video-url="videoUrl"
      ref="videoPlayerRef"
      v-if="videoOpen"
    ></videoPlayerCom>
    <div class="buttonGroup">
      <el-button type="primary" size="small" @click="playClick">播放</el-button>
      <el-button type="primary" size="small" @click="suspendedClick">暂停</el-button>
      <el-button type="primary" size="small" @click="resetProgress">重置</el-button>
    </div>
  </div>
</template>

<script>
  import videoPlayerCom from '@/components/commonVideoPlayer'

  export default {
    name: 'myVideoPlayer',
    components: {
      videoPlayerCom,
    },
    data() {
      return {
        videoOpen: true,
        videoUrl: [
          {
            type: 'video/mp4',
            src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
          },
          // {
          //   type: 'application/x-mpegURL',
          //   src: 'http://ivi.bupt.edu.cn/hls/btv1hd.m3u8',
          // },
        ],
      }
    },

    mounted() {},

    methods: {
      playClick() {
        this.$refs.videoPlayerRef.player()
      },
      suspendedClick() {
        this.$refs.videoPlayerRef.pause()
      },
      resetProgress() {
        this.$refs.videoPlayerRef.resetProgress()
      },
    },
  }
</script>

<style lang="scss" scoped>
  .videoPlayerBox {
    width: 800px;
    height: 800px;
    .buttonGroup{
      text-align: center;
      margin-top: 10px;
    }
  }
</style>
